{include file="public/header,public/nav,public/fixbar" title="关于<?php echo $keywords?>的商品-<?php echo request()->pc_info['seo_title']?>"/}
<div class="layui-body">
    <div class="layui-container">
        <div class="layui-main min-height-80vh">
            <div class="layui-row">
                <div class="layui-col-xs12 layui-col-md6 search-box">
                    <div>
                        <input name="keywords" value="{$keywords ?? ''}" class="layui-input" placeholder="输入商品关键词">
                        <button style="display: inline-block;position: absolute;right: 0px;margin-top: -50px;" type="button" class="layui-btn layui-bg-success" id="searchBtn"><i class="layui-icon layui-icon-search"></i> 搜索</button>
                    </div>
                    <div class="layui-form-mid layui-text-em">搜索课程、题库、实物、考试、直播课</div>
                </div>
            </div>
            
            <div class="layui-row">
                <blockquote class="layui-elem-quote">
                    以下是有关 <span class="layui-font-red">{$keywords}</span> 的商品，共<span class="search-count" style="color:#16b777">0</span>条数据
                </blockquote>
                <div class="layui-col-space25" id="product-list">
                    
                </div>
            </div>
        </div>
    </div>
</div>
{include file="public/footer"/}
<script type="text/javascript">
    layui.use(['flow','form'], function(){
        var $ = layui.jquery, flow = layui.flow, form = layui.form;

        $("#searchBtn").click(function(){
            var loading = layer.load();
            var keywords = $('input[name="keywords"]').val();
            var href = '/search/result?keywords='+keywords;
            if (keywords == '') {
                href = '/search/index';
            }
            
            location.href = href;
            layer.close(loading);
        })
        
        $('input[name="keywords"]').keydown(function(event) {
            if (event.key === 'Enter') { // 判断按键是否为Enter键
                $("#searchBtn").click();
            }
        });

        var keywords = "{$keywords ?? ''}";
        $(function(){
            loadList(keywords);  // 加载列表
        })

        // 分页加载列表
        function loadList(keywords=''){
            var limit = 15;//每次请求的条数
            flow.load({
                elem: '#product-list' //指定列表容器
                ,scrollElem: ''//滚动条所在元素
                ,end: '—— 已经到底了~ ——'
                ,done: function(page, next){ //到达临界点（默认滚动触发），触发下一页的回调
                    $.ajax({
                        type: "post",
                        dataType: "json",
                        data: {'page': page, 'limit':limit, 'keywords':keywords},//请求的页码和每页显示条数
                        url: '/search/result',
                        success: function (res) {
                            var lis = [];
                            if(res.code == 0){
                                $(".search-count").text(res.count);
                                if (res.data.length > 0) {
                                    var newsHtml = '';
                                    layui.each(res.data, function(index, item){
                                        var price = '<p class="product-price">免费</p>';
                                        if (item.sale_price > 0) {
                                            price = `<p class="product-price"><span class="symbol">￥</span>${item.sale_price}</p>`;
                                        }
                                        var img = `<img src="${item.head_imgs}" class="user-course-img">`;
                                        if (item.product_type == 1) {
                                            img = `<img src="${item.head_imgs}" class="user-goods-img">`;
                                        } else if (item.product_type == 10){
                                            img = `<div class="justify-content-center">
                                                        <img style="background-color: ${item.background_color};margin-right: 0px;" src="${item.head_imgs}" class="user-goods-img">
                                                        <span class="exam-sub-title">${item.sub_title}</span>
                                                    </div>`;
                                        }
                                        newsHtml += `<div class="layui-col-xs12 layui-col-sm6 layui-col-md6 layui-col-lg4">
                                                        <a href="${item.href}">
                                                            <div class="layui-card product-item">
                                                                <div class="layui-card-body">
                                                                    <div class="item">
                                                                        ${img}
                                                                        <div class="detail" style="height: 60px;">
                                                                            <div class="product-title layui-ellipss">
                                                                                <span class="item-title-label">${item.product_type_text}</span> ${item.name}
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                <div class="layui-card-footer">
                                                                    <p class="text">已售 <b>${item.virtual_sales+item.real_sales}</b></p>
                                                                    ${price}
                                                                </div>
                                                            </div>
                                                        </a>
                                                    </div>`;
                                    });
                                    
                                    lis.push(newsHtml);
                                    //执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页
                                    //res.total为Ajax返回的总页数，只有当前页小于总页数的情况下，才会继续出现加载更多
                                    next(lis.join(''), page < Math.ceil(res.count/limit));
                                    
                                } else {
                                    $('#product-list').html('<div class="layui-empty"><img src="/static/images/nodata/no_search.png"><p>没有找到相关商品~</p></div>');
                                }
                            } else {
                                layer.msg(res.msg, {icon:2, time: 1500});
                            }
                        }
                        ,error:function(e){
                            layer.msg("请求失败："+e.msg, {icon:2, time: 1500});
                        },
                    });
                }
            });
        }
    });
</script>